<template>
  <div class="mertic-con">
    <div class="module-title">
      <div class="title-left">
        <span>绩效榜</span>
        <div class="title-tabs">
          <div class="tabs" @click="changeTab(0)" :class="{ activity: activeTab === 0 }">个人绩效</div>
          <div class="tabs" @click="changeTab(2)" :class="{ activity: activeTab === 2 }">公示榜</div>
        </div>
      </div>
      <div class="title-right" @click="goMorepage">
        更多
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <template v-if="activeTab === 0">
      <div v-if="personList.length" class="mertis-box">
        <el-card v-for="item in personList" :key="item.id" shadow="hover" class="mertis-item">
          <div slot="header" class="mertis-item-title">
            {{ item.title || item.name }}
          </div>
          <!-- 内容区 -->
          <div class="mertis-item-result">
            <div class="result-label">考核结果</div>
            <div class="result-value">
              {{ item.scoreLevel }}
            </div>
          </div>
        </el-card>
      </div>
      <Empty v-else />
    </template>
    <template v-if="activeTab === 2">
      <div class="module-box">
        <div class="module-con" v-if="honorList.length">
          <div class="con-item" v-for="(honor, index) in honorList" :key="index">
            <div class="item-left">
              <el-avatar
                slot="reference"
                class="user-icon"
                :src="honor.headUrl"
                size="large"
                v-if="honor && honor.headUrl"></el-avatar>
              <el-avatar
                slot="reference"
                class="user-icon"
                :src="honor.gender === '女' ? circleUrlW : circleUrlM"
                size="large"
                v-else></el-avatar>
            </div>
            <div class="item-right">
              <div class="right-top">
                <span class="user-name">{{ honor.userName }}</span>
                <span class="org-name">{{ honor.organName }}</span>
              </div>
              <div class="right-bottom">
                {{ getDesc(honor.busType, honor.grainDate) }}
                <span class="merits_honor_one_result">{{ honor.honorLevel }}</span>
              </div>
            </div>
            <div class="item-img">
              <img :src="getImg(honor.honorLevel)" alt="" />
            </div>
          </div>
        </div>
        <Empty v-else class="empty-box"></Empty>
      </div>
    </template>
  </div>
</template>

<script>
import Empty from '@com/Empty.vue'
import { selectListHonorRollPC, getPersonMerits } from '@apis/merits.js'
export default {
  name: 'MertisCon',
  components: {
    Empty,
  },
  emits: [],
  props: {},
  data() {
    return {
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
      levelImgList: [
        require('@images/home/mertis-hao.png'),
        require('@images/home/mertis-jhao.png'),
        require('@images/home/mertis-yban.png'),
        require('@images/home/mertis-cha.png'),
      ],
      honorList: [],
      levelList: ['好', '较好', '一般', '较差'],
      activeTab: 2,
      personList: [], // 个人绩效考核数据
    }
  },
  created() {
    this.getHonorData()
  },
  mounted() {},
  methods: {
    getHonorData() {
      selectListHonorRollPC({}).then(res => {
        if (res.status === 200) {
          this.honorList = res.data || []
        }
      })
    },
    getDesc(busType, organId) {
      let desc = busType === '1' ? '个人' : '组织'
      const organ = {
        1: '第一季度',
        2: '第二季度',
        3: '第三季度',
        4: '第四季度',
      }
      desc += `${organ[organId]}考核结果：`
      return desc
    },
    getImg(level) {
      const idx = this.levelList.findIndex(item => {
        return item === level
      })
      return this.levelImgList[idx]
    },
    goMorepage() {
      this.$router.push({
        path: '/roster/honor',
      })
    },
    changeTab(type) {
      if (this.activeTab === type) return
      this.activeTab = type
      if (this.activeTab === 0) {
        this.getPersonalMerits()
      } else {
        this.getHonorData()
      }
    },
    getPersonalMerits() {
      const { loginPostInfo = {} } = JSON.parse(localStorage.PSKH_USERINFO)
      getPersonMerits({
        currentPage: 1,
        pageSize: 10,
        param: {
          grainDate: '', // 第几季度
          title: '',
          year: '',
          organId: loginPostInfo.orgId || '',
        },
      }).then(res => {
        const { content = [] } = res.data
        this.personList = content
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.mertic-con {
  height: 100%;
  .module-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #b5b5b5;
    padding-bottom: 8px;
    .title-left {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      .title-tabs {
        display: flex;
        align-items: center;
        margin-left: 58px;
        color: #777777;
        line-height: 18px;
        font-size: 16px;
        font-weight: normal;
        .tabs {
          margin-right: 39px;
          cursor: pointer;
        }
        .activity {
          color: #0060c4;
          position: relative;
          &::before {
            position: absolute;
            left: 0;
            width: 100%;
            bottom: -12px;
            height: 2px;
            background: #2b78f1;
            z-index: 1;
            content: '';
          }
        }
      }
    }
    .title-right {
      font-size: 14px;
      cursor: pointer;
    }
  }
  .module-con {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    cursor: default;
    // height: calc(100% - 45px);
    overflow-y: auto;
    .con-item {
      display: flex;
      align-items: center;
      // width: 350px;
      width: 32%;
      height: 62px;
      // margin-right: 15px;
      margin-right: 2%;
      background-color: #e4e4e4;
      border-top: 1px solid #ffffff;
      font-size: 14px;
      line-height: 24px;
      padding: 0 15px;
      position: relative;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:nth-child(n + 4) {
        margin-top: 15px;
      }
      .item-right {
        margin-left: 15px;
        .user-name {
          font-size: 16px;
          font-weight: bold;
          margin-right: 5px;
        }
      }
      .item-img {
        position: absolute;
        right: 15px;
        top: 0;
      }
      .user-icon {
        img {
          width: 100%;
        }
      }
    }
  }
  .mertis-box {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    .mertis-item {
      width: calc(50% - 30px);
      margin: 0 15px;
      margin-bottom: 30px;
      border: 1px solid #e4eaf0;
      border-radius: 5px;
      /deep/.el-card__header {
        padding: 15px 20px;
      }
      /deep/.el-card__body {
        padding: 18px 20px;
      }
      .mertis-item-title {
        font-size: 16px;
        font-weight: 600;
      }
      .mertis-item-result {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .result-label {
        font-size: 16px;
      }
      .result-value {
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
  /deep/.empty-box {
    .img {
      width: 15% !important;
    }
  }
}
</style>
